<template>
  <el-container>
    <!--查询条件开始-->
    <el-header height="1">
      <el-form ref="queryForm" size="small" :model="parmsValue.query" label-width="160px" class="middle-form">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="pmod_name" label="模板名称">
              <el-input v-model="parmsValue.query.pmod_name" :clearable="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="prod_mod" label="产品模式">
              <el-select v-model="parmsValue.query.prod_mod" :clearable="true">
                <el-option v-for="(item,index) in dict.prod_mod" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="success" size="small" @click="query">查询</el-button>
          <el-button type="info" size="small" @click="resetFields('queryForm')">重置</el-button>
          <el-button type="success" size="small" @click="showPage('add')">新建产品模板</el-button>
        </el-row>
      </el-form>
    </el-header>
    <!--查询条件结束-->
    <!--列表开始-->
    <el-main>
      <table-pagination-slot
        :table-data="table.prod_mod.tableData"
        :total="table.prod_mod.total"
        :page-size="table.prod_mod.limit"
        :now-page="table.prod_mod.nowPage"
        @current-change="currentChange"
      >
        <el-table-column prop="pmod_name" label="模板名称" />
        <el-table-column prop="prod_mod" label="产品模式">
          <template slot-scope="scope">
            {{ scope.row.prod_mod| dictTable(dict.prod_mod) }}
          </template>
        </el-table-column>
        <el-table-column prop="acct_mod" label="核算方式">
          <template slot-scope="scope">
            {{ scope.row.acct_mod| dictTable(dict.acct_mod) }}
          </template>
        </el-table-column>
        <el-table-column prop="income_type" label="收益特点">
          <template slot-scope="scope">
            {{ scope.row.income_type| dictTable(dict.income_type) }}
          </template>
        </el-table-column>
        <el-table-column prop="issu_ccy" label="募集币种">
          <template slot-scope="scope">
            {{ scope.row.issu_ccy| dictTable(dict.issu_ccy) }}
          </template>
        </el-table-column>
        <el-table-column prop="invest_object" label="投资者类型" width="300px">
          <template slot-scope="scope">
            {{ scope.row.invest_object | dictTable(dict.invest_object) }}
          </template>
        </el-table-column>
        <el-table-column prop="risk_lev" label="风险等级">
          <template slot-scope="scope">
            {{ scope.row.risk_lev| dictTable(dict.risk_lev) }}
          </template>
        </el-table-column>
        <el-table-column fixed="left" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="showPage('update',scope.row)">修改</el-button>
            <el-button type="text" @click="showPage('detail',scope.row)">详情</el-button>
            <el-button type="text" @click="deleteProdMod(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </table-pagination-slot>
    </el-main>
    <!--列表结束-->
  </el-container>
</template>

<script>
  import { formItems } from '@/utils/formItems'
  import * as kk from '@/utils/k-utils'
  import request from '@/utils/request'
  import axios from 'axios'

  export default {
    data() {
      return {
        dict: {
          prod_mod: {},
          acct_mod: {},
          income_type: {},
          issu_ccy: {},
          invest_object: {},
          risk_lev: {}
        },
        table: {
          prod_mod: {
            total: 100,
            limit: 10,
            exeid: 'getProdModelInfo',
            nowPage: 1,
            tableData: []
          }
        },
        form: {
          rules: {}
        },
        parmsValue: {
          // 查询字段值
          query: {
            pmod_name: '',
            prod_mod: ''
          },
          // 增删改字段值
          update: {}
        }
      }
    },
    // 生命周期开始
    activated() {
      this.init()
    },
    // 生命周期结束
    methods: {
      query() {
        this.table.prod_mod.nowPage = 1
        this.loadTable()
      },
      init() {
        const dictReq = []
        const dicts = ['t8_prod_model', 't8_busi_account_type', 't8_income_attr', 't8_currtype', 't8_sale_oside', 't8_prod_risk_level']
        dicts.forEach(key => dictReq.push(request({ url: 'system/base/dict/' + key + '.json', method: 'post', loading: true })))
        axios.all(dictReq).then(axios.spread((prod_mod, acct_mod, income_type, issu_ccy, invest_object, risk_lev) => {
          this.dict['prod_mod'] = prod_mod
          this.dict['acct_mod'] = acct_mod
          this.dict['income_type'] = income_type
          this.dict['issu_ccy'] = issu_ccy
          this.dict['invest_object'] = invest_object
          this.dict['risk_lev'] = risk_lev
          this.loadTable()
        }))
      },
      resetFields(form) {
        this.$refs[form].resetFields()
      },
      loadTable() {
        this.table.prod_mod.prod_mod = this.parmsValue.query.prod_mod
        this.table.prod_mod.pmod_name = this.parmsValue.query.pmod_name
        kk.k_load_table(this, 'prod_mod', formItems.PROD)
      },
      currentChange(index) {
        this.table.prod_mod.nowPage = index
        this.loadTable()
      },

      handleData() {
        this.parmsValue.update.invest_object = this.parmsValue.update.invest_object.join(',')
      },

      reverseHandleData() {
        this.parmsValue.update.invest_object = this.parmsValue.update.invest_object.split(',')
      },

      showPage(editMode, params = {}) {
        let path = ''
        switch (editMode) {
        case 'update':
          path = '/prod_update_model'
          this.$router.push({ path: path, query: { params: JSON.stringify(params) }})
          break
        case 'add':
          path = '/prod_add_model'
          this.$router.push(path)
          break
        case 'detail':
        default:
          path = '/prod_detail_model'
          this.$router.push({ path: path, query: { params: JSON.stringify(params) }})
        }
      }

    }
  }
</script>
